<template>
	<view class="box" v-if="agreePrivacy">
    <HeadBox :memberInfo = "memberInfo" />
    <One @isLogin="isLogin" :memberInfo = "memberInfo" />
    <Two :bbslist="bbslist" />
    <!-- <Three /> -->
    <Four :showOrderText="showOrderText" />
		<view class="five" v-if="orderList.length>0">
			<view class="" :key="data.id" v-for=" data  in  orderList " :item="data" style="margin-top: 20rpx;">
				<view @tap="navigateTo('/pages/OrderDetailsPage/OrderDetailsPage?orderNo='+data.orderNo)">
					<view class="content1 content">
						<view class="left">{{data.orderDetail}}</view>
						<view class="right">¥{{data.orderAmount / 100}}</view>
					</view>
					<view class="content2 content">
						<view class="left">{{data.orderType}}</view>
						<view class="right">{{data.orderStatusText}}</view>
					</view>
				</view>
				<view class="content3 content">
					<!-- 目前只查询已支付状态订单 -->
					<!-- <view class="right1 right" @tap="deleteOrder(data.id)">删除订单</view> -->
					<view class="right2 right" @tap="reOrder(data)">再次预定
					</view>
				</view>
			</view>
		</view>
    <SearchMore :bbslist="bbslist" />
	</view>
</template>
<script>
	import { mapActions, mapState } from 'vuex';
	import {
		updateUser
	} from '../../api/user';
	import {
		getOrderList,deleteOrder
	} from '../../api/room';
	import {
		getMemberInfo
	} from "../../api/member.js"
	import spliceMMDD from '../../utils/stringSpliceMMDD';
	import HiltonHotelDataVue from '../../components/HiltonHotelData/HiltonHotelData.vue';
	import MembershipRatePop from '../../components/HiltonHotelData/MembershipRatePop/MembershipRatePop.vue';
  import HeadBox from './HeadBox.vue';
  import One from './One.vue';
  import Two from './Two.vue';
  import Three from './Three.vue';
  import Four from './Four.vue';
  import SearchMore from './SearchMore.vue';
  import {bbsList} from '../../api/bbs.js'
	import {
		navigateTo,
		getProvider,
		showModal,
		uniLogin
	} from "../../utils/promise"
	export default {
		components: {
			HiltonHotelDataVue,
			MembershipRatePop,
      HeadBox,
      One,
      Two,
      Three,
      Four,
      SearchMore
		},
		data() {
			return {
				daziList: [],
				orderList: [],
				orderStatus: [
					'未知', 
					'待付款', 
					'支付失败', 
					'等待入住', 
					'已入住', 
					'未知',
					'已评论',
					'未知',
					'未知',
					'已删除',
					'已退款',
					'退款中'
				], //0-未知，1-待付款，2-支付失败，3-支付成功, 等待入住，4-已入住，5-未知，6=已评论，9=已删除，10=已退款，11=退款中
				deleteTmpId:0,
				showOrderText:true,
				bbslist:[],
				memberInfo: {}
			}
		},
		computed: {
			...mapState(['userInfo', 'userToken', 'agreePrivacy']),
		},
		onLoad() {
			console.log('===============获取推荐人ID===============');
			console.log('===============推荐人ID:', uni.getStorageSync("agentUserId"));
      if (!this.agreePrivacy) {
        uni.redirectTo({ url: '/pages/PrivacyAgreement/PrivacyAgreement' });
        return
      }
			if (!this.userToken) {
				this.isLogin()
			} else {
        this.getMallConfig()
      }
		},
		onShow() {
			//刷新订单列表
			this.getOrderList()


			bbsList({type:99}).then(response=>{
				this.bbslist= response.data.records;
			})
			
			getMemberInfo().then(response => {
				this.memberInfo = response.data;
			})
		},
		methods: {
			...mapActions(["login", "getUserInfo", 'getMallConfig']),
			async getOrderList() {
				let params = {
					'orderStatus': 3,
					'current': 1,
					'size': 1000
				}
				getOrderList(params).then((res) => {
		 			if (res.code === 200) {
						const {
							data
						} = res
						this.orderList = data.records
						this.orderList.forEach((f) => {
							let date1 = new Date(f.bookingCheckInDate.substring(0, 10));
							let date2 = new Date(f.bookingCheckOutDate.substring(0, 10));
							let diffMilliseconds = date2 - date1; // 差值毫秒数
							let diffDays = diffMilliseconds / (1000 * 60 * 60 * 24); // 转换为天数
							console.log(spliceMMDD(f.bookingCheckInDate.substring(0, 10), 'MM'))
							f.orderDetail = spliceMMDD(f.bookingCheckInDate.substring(0, 10), 'MM') + '月' + spliceMMDD(f
									.bookingCheckInDate.substring(0, 10), 'DD') + '日(入住)-' + spliceMMDD(f
									.bookingCheckOutDate.substring(0, 10), 'MM') + '月' + spliceMMDD(f
									.bookingCheckOutDate.substring(0, 10), 'DD') + '日(离店)' + diffDays + '晚/' + f
								.roomQuantity + '间';
							f.orderType = f.categoryName;
							f.orderAmount = f.totalPrice;
							f.orderStatusText = this.orderStatus[f.orderStatus]
						});
						console.log(this.orderList)
						if(this.orderList.length>0){
							this.showOrderText = false
						}
					}
				}).catch((err) => {
					console.log(err)
				})

				//this.orderList = [{"orderDetail":"住宿+滕王阁+庐山，2 天 1 晚","orderType":"豪华套间","orderAmount":"3683"},{"orderDetail":"住宿+滕王阁，3 天 2 晚","orderType":"豪华套间","orderAmount":"3853"},{"orderDetail":"住宿+庐山，5 天 4 晚","orderType":"豪华套间3","orderAmount":"388"}]
			},
			navigateTo,
			isLogin() {
				showModal({
					title: "登录确认",
					content: "是否确认登录",
					showCancel: true,
					cancelText: "否",
					confitmText: "是"
				}).then((res) => {
					if (res.cancel) return
					this.login()
				}).catch((err) => {
					console.log(err)
				})
			},
			wxLogin() {
				// let provider, code
				getProvider({
					service: "oauth"
				}).then((res) => {
					let provider = res.provider[0]
					uniLogin({
						provider: provider
					}).then((res) => {
						// console.log(res)
						let code = res.code
						// console.log(code)
						login(code).then((res) => {
							// console.log(res)
							const {
								data
							} = res
							uni.setStorageSync("token", data.token)
						}).catch((err) => {
							console.log(err)
						})
					}).catch((err) => {
						console.log(err)
					})
					// console.log(1)
				})
			},
			updateUser() {
				let params = {
					avatar: this.userInfo.avatar.avatarUrl
				}
				updateUser(params).then((res) => {
					this.getUserInfo()
				}).catch((err) => {
					console.log(err)
				})
			},
			getUserInfo() {
				getUserInfo().then(async (res) => {
					console.log(res)
					const {
						code,
						data,
						msg
					} = res
					if (code !== 0) {
						return
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			deleteOrder(orderId) {
				//console.log("deleteOrder--begin--e---"+e)
				//this.deleteTmpId = e
				console.log("deleteOrder--begin--"+orderId)
				showModal({
					title: "删除确认",
					content: "是否确认删除",
					showCancel: true,
					cancelText: "否",
					confitmText: "是"
				}).then((res) => {
					if (res.cancel) {
						console.log("return。。")
						return
					}
					//调用后台删除订单接口，传参orderId
					console.log("deleteOrder--deal--"+orderId)
					let params = {'id':orderId}
					//params.id = this.deleteTmpId
					console.log("deleteOrder--deal-params.id-"+params.id)
					deleteOrder(params).then((res) => {
						//console.log('deleteOrder')
						//console.log(res)
						if(res.code == 200){
							//刷新下订单列表
							this.getOrderList()
							console.log("。。delete--done")
						}
					}).catch((err) => {
						console.log(err)
					})
					//this.deleteTmpId = 0

					//console.log("。。delete"+this.deleteTmpId)
					//console.log("。。delete")

				}).catch((err) => {
					console.log(err)
				})
			},
			reOrder(orderData) {
				const params = {
					guestName: orderData.guestName,
					guestMobile: orderData.guestMobile, 
					userRemark: orderData.userRemark || '',
					adultsQuantity: orderData.adultsQuantity,
					childQuantity: orderData.childQuantity,
					roomQuantity: orderData.roomQuantity,
					categoryId: orderData.categoryId,
					categoryName: orderData.categoryName,
					isReOrder: true // 标记是再次预定
				}
				navigateTo({
					url: `/pages/ReservationConfirmationPage/ReservationConfirmationPage?order=${JSON.stringify(params)}`
				})
			},
		},
	}
</script>
<style lang="less" scoped>
	.box {
		background-color: rgb(245, 245, 245);
		width: 100%;
		min-height: 100vh;
		border: 1px solid rgb(245, 245, 245);
    box-sizing: border-box;
    overflow: hidden;

		.five {
			margin: 20rpx 30rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 30rpx;
			box-sizing: border-box;

			.content {
				display: flex;
				justify-content: space-between;
				width: 100%;
			}

			.content1 {
				font-family: 'PingFang SC';
				font-weight: 600;
				font-size: 28rpx;
				letter-spacing: 0px;

				.left {
					color: #222222;
					font-size: 28rpx;
				}

				.right {
					color: #FF4D00;
				}

			}

			.content2 {
				margin-top: 40rpx;
				color: #979797;
				font-family: 'PingFang SC';

				.left {
					font-weight: 400;
					font-size: 26rpx;
					letter-spacing: 0px;
				}

				.right {
					font-weight: 400;
					font-size: 26rpx;
					letter-spacing: 0px;
				}
			}

			.content3 {
				margin-top: 40rpx;
				justify-content: flex-end;

				.right {
					width: 160rpx;
					height: 56rpx;
					line-height: 56rpx;
					border-radius: 8rpx;
					border-width: 1rpx;
					text-align: center;
					font-family: 'PingFang SC';
					font-weight: 400;
					font-size: 26rpx;
					line-height: 56rpx;
					letter-spacing: 0px;
				}

				.right1 {
					border: 1rpx solid #979797;
					color: #979797;
				}

				.right2 {
					background: #0F4C97;
					color: #FFFFFF;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>